<template>
  <div class="box">
    <header class="header">
      <van-tabs
      v-model="activeName"
      color="#FDD949"
      line-width="0.14rem"
      line-height="0.035rem"
      title-inactive-color="rgba(28, 28, 28, .5)"
      title-active-color="rgba(28, 28, 28, 1)"
      sticky
      >
        <img
        src="@/assets/img/gerenzhongxin.png"
        slot="nav-right"
        class="users-slot"
        />
        <van-tab title="关注" name="a" title-style="letter-spacing: 0.01rem;">
          <van-pull-refresh success-text="刷新成功" v-model="isLoading" @refresh="onRefresh">
            <PostList :postlist="list" :loading="loading" :goComment="goCommentModule" />
          </van-pull-refresh>
        </van-tab>
        <van-tab title="推荐" name="b" title-style="letter-spacing: 0.01rem;">
          <ol class="hot-tag">
            <li v-for="itm of tags" :key="itm.id">
              <p>
                <span>#{{ itm.name }}</span>
                <i class="hot-icon" v-show="itm.hot === 1"></i>
              </p>
            </li>
          </ol>
          <div style="height: 0.08rem; width: 100%; background-color: #F7F7F7;"></div>
          <PostList :postlist="list" :loading="loading" postType="unconcerned" :goComment="goCommentModule" />
        </van-tab>
        <van-tab title="最新" name="c" title-style="letter-spacing: 0.01rem;">
          <PostList :postlist="list" :loading="loading" postType="unconcerned" :goComment="goCommentModule" />
        </van-tab>
      </van-tabs>
      <div class="news-publish" @click="$router.push({ name: 'sendpost' })">发帖</div>
    </header>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, ShareSheet, PullRefresh, Circle } from 'vant'
import PostList from '@/components/community/postList'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(ShareSheet)
Vue.use(PullRefresh)
Vue.use(Circle)

export default {
  components: {
    PostList
  },
  data () {
    return {
      tags: [
        { id: 1, name: '记账打卡', hot: 1 },
        { id: 2, name: '减肥打卡', hot: 0 },
        { id: 3, name: '自拍多一面 颜值高一点', hot: 0 },
        { id: 4, name: '理财多一点，收益滴滴滴', hot: 1 },
        { id: 5, name: '95后真实生活状态', hot: 1 },
        { id: 6, name: '美食不可辜负', hot: 0 }
      ],
      activeName: 'a',
      list: [
        { id: 1, nickname: '霍斯特哥若1', time: '04-21 21:32', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡记账打卡记账打卡记账打卡记账打卡记账打卡', zf: 20, pl: 32, dz: 55, xz: 1, gz: 0, sc: 0 },
        { id: 2, nickname: '霍斯特哥若2', time: '04-21 21:33', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第二天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 21, pl: 33, dz: 56, xz: 0, gz: 1, sc: 0 },
        { id: 3, nickname: '霍斯特哥若3', time: '04-21 21:34', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第三天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 22, pl: 34, dz: 57, xz: 1, gz: 1, sc: 1 },
        { id: 4, nickname: '霍斯特哥若4', time: '04-21 21:35', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第四天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 23, pl: 35, dz: 58, xz: 0, gz: 0, sc: 0 },
        { id: 5, nickname: '霍斯特哥若5', time: '04-21 21:36', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第五天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 24, pl: 36, dz: 59, xz: 1, gz: 1, sc: 1 },
        { id: 6, nickname: '霍斯特哥若6', time: '04-21 21:37', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第六天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 25, pl: 37, dz: 60, xz: 0, gz: 0, sc: 0 }
      ],
      isLoading: false,
      loading: true
    }
  },
  methods: {
    goCommentModule () {
      this.$router.push({ name: 'details' })
    },
    onRefresh () {
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    }
  },
  mounted () {
    // 请求数据
    this.loading = false
  }
}
</script>

<style lang="scss" scoped>
// 样式
  @import '@/assets/css/community/index.scss';
</style>
